<template>
  <div>
    <Card>
      <div class="apply-container">
        <Row>
          <i-col span="20">
            <Row>
              <i-col span="4">
                <Cascader change-on-select :data="organization" v-model="manageCom" placeholder="管理机构" clearable @on-change="organizationChange"></Cascader>
              </i-col>
              <i-col span="4" offset="1">
                <Select v-model="applyType" style="width: 100%" clearable placeholder="审批类型">
                  <Option
                    v-for="item in applyTypeList"
                    :key="item.key"
                    :value="item.key"
                  >{{item.value}}</Option>
                </Select>
              </i-col>
              <i-col span="8" offset="1">
                <DatePicker
                  type="daterange"
                  v-model="dateRange"
                  placement="bottom-start"
                  placeholder="开始日期 ~ 结束日期"
                  :editable="false"
                  style="width: 100%"
                ></DatePicker>
              </i-col>
              <i-col span="4" offset="1">
                <Select v-model="employeeName" placeholder="员工姓名" clearable>
                  <Option
                    v-for="item in empolyeeList"
                    :key="item.key"
                    :value="item.key"
                  >
                  {{item.value}}-{{item.key}}
                  <!-- {{item.value}} -->
                  </Option>
                </Select>
              </i-col>
            </Row>
          </i-col>
          <i-col span="4" style="text-align:right">
            <Button type="primary" @click="query(1)">查询</Button>
            <Button type="default" @click="reset()" style="margin-left: 10px;">重置</Button>
          </i-col>
        </Row>
        <Row v-for="item in approvalList" :key="item.index" class="card-row">
          <div @click="toDetail(item)" style="cursor:pointer;">
            <Card>
              <Row>
                <i-col span="21" style="font-size:18px">
                  <b>{{item.applyType}}</b>丨
                  <b>{{item.employeeIdAndName}}</b>

                  <Tag :color="item.color" style="margin-left:10px">{{item.status}}</Tag>
                </i-col>
                <i-col span="3">{{item.applyTime}}</i-col>
              </Row>
              <div style="margin-top:10px;width:650px">
                <div class="information-title">
                  <span v-if="item.applyType!='补卡'">开始时间：{{item.startTime}}</span>
                  <span v-if="item.applyType!='补卡'">结束时间：{{item.endTime}}</span>
                  <span v-if="item.applyType=='请假'">请假类型：{{item.detail}}</span>
                  <span v-if="item.applyType=='外出'">外出地点：{{item.places}}</span>
                  <span v-if="item.applyType=='补卡'">补卡类型：{{item.detail}}</span>
                  <span v-if="item.applyType=='补卡'">补卡时间：{{item.clockTime}}</span>
                </div>
                <div class="information-title">
                  <span class="overSpan">
                    {{item.applyType + '事由：' + item.reason}}
                  </span>
                </div>
              </div>
            </Card>
          </div>
        </Row>
        <Row type="flex" justify="end" style="margin-top:20px">
          <i-col>
            <Page :total="total" @on-change="indexChange" style="float:right" :current="pageIndex" />
          </i-col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import util from "../../../util/util";
export default {
  data() {
    return {
      applyType: "", // 类型
      dateRange: [], // 开始日期 ~ 结束日期
      approvalList: [], // 审批列表
      applyTypeList: [],
      pageIndex:1,
      manageCom: [],
      organization: [],
      employeeName: "",
      pageObj: "",
      empolyeeList:[],
      jsonData:{}
    };
  },
  methods: {
    // 通过职员id获取待我审批申请单数量
    getTotalApply() {
      this.api.getTotalApply().then(res => {
        if (res.code == 200 && res.data != null) {
          //2为监听sessionStorage
          this.$addStorageEvent(2, "count", res.data.total);
        }
      });
    },

    // 跳转到详情页面
    toDetail(item) {
      this.$router.push({
        // name: "approvalDetails",
        path: "approvalDetails",
        query: {
          item: item
        }
      });
    },

    //查询按钮
    query(e) {
      // this.pageIndex = 1;
      if (this.dateRange[0]) {
        var date1 = new Date(this.dateRange[0]).toJSON();
        var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString();
        var date3 = new Date(this.dateRange[1]).toJSON();
        var date4 = new Date(+new Date(date3) + 8 * 3600 * 1000).toISOString();
        date4 = date4.replace("00", "24");
      } else {
        date2 = this.dateRange[0];
        date4 = this.dateRange[1];
      }
      let obj = {
        applyType: this.applyType,
        startTime: date2,
        endTime: date4,
        index: e === 1 ? this.pageIndex = 1 : this.pageIndex,
        pageSize: 10,
        employeeCode: this.employeeName,
        managecom: this.manageCom[this.manageCom.length-1]
      };
      this.pageObj = obj;
      this.$router.push({
        path: this.$router.path,
        query: this.pageObj
      })
      this.api.getFewApplyInfo(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.approvalList = res.data.data;
          this.total = res.data.total;
          this.approvalList.forEach(element => {
            // if (element.allInfo) {
            //   let elementArray = []
            //   if(element.applyType=="外出"){
            //     let det1 = '开始时间：'+element.startTime+',结束时间：'+element.endTime+',外出地点：'+element.places+ (element.reason ? (',外出事由：'+element.reason): '')
            //     // let elementArray = element.detail1.split(",");
            //     elementArray = det1.split(",");

            //   }else{
            //     elementArray = element.allInfo.split(",");

            //   }
            //   // let det1 = '开始时间：'+element.startTime+',结束时间：'+element.endTime+',请假类型：'+element.detail+ (element.reason ? ',请假事由：11111': '')
            //   // // let elementArray = element.detail1.split(",");
            //   // let elementArray = det1.split(",");

            //   // // let elementArray = element.allInfo.split(",");
            //   element.allInfo = "";
            //   if (elementArray.length > 3) {
            //     for (let i = 0; i < elementArray.length; i++) {
            //       if (i == 2) {
            //         element.allInfo += elementArray[i] + "<br>";
            //         continue;
            //       }
            //       element.allInfo +=
            //         elementArray[i] +
            //         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            //     }
            //   } else {
            //     for (let i = 0; i < elementArray.length; i++) {
            //       element.allInfo +=
            //         elementArray[i] +
            //         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            //     }
            //   }
            // }
            element.color = element.status == "审批中" ? "warning" : "default";
          });
        } else {
          this.approvalList = [];
          this.total = 0;
          this.$Message.info(res.msg);
        }
      });
    },

    // 分页查询
    pageQuery() {
      this.pageObj.index = this.pageIndex;
      this.$router.push({
        path: this.$router.path,
        query: this.pageObj
      })
      this.api.getFewApplyInfo(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.approvalList = res.data.data;
          this.total = res.data.total;
          // 对信息分行显示
          this.approvalList.forEach(element => {
            // if (element.allInfo) {
            //   let elementArray = element.allInfo.split(",");
            //   element.allInfo = "";
            //   if (elementArray.length > 3) {
            //     for (let i = 0; i < elementArray.length; i++) {
            //       if (i == 2) {
            //         element.allInfo += elementArray[i] + "<br>";
            //         continue;
            //       }
            //       element.allInfo +=
            //         elementArray[i] +
            //         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            //     }
            //   } else {
            //     for (let i = 0; i < elementArray.length; i++) {
            //       element.allInfo +=
            //         elementArray[i] +
            //         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            //     }
            //   }
            // }
            element.color = element.status == "审批中" ? "warning" : "default";
          });
        } else {
          this.approvalList = [];
          this.total = 0;
          this.$Message.info(res.msg);
        }
      });
    },

    // 初始化下拉框
    initialize() {
      // 初始化机构
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          this.organization = arr
          this.Echo()
        } else {
          this.organization = [];
        }
      });
      // 初始化申请类型
      this.api.getAllApplyType().then(res => {
        if (res.code == 200 && res.data != null) {
          this.applyTypeList = res.data;
        } else {
          this.applyTypeList = [];
        }
      });
    },
    organizationChange(value) {
      if (value) {
        this.employeeName = "";
        if (value) {
          let obj = {
            managecom: value
          };
          $.ajax("scrm-gateway/scrm-uer/api/uerList/selectuser/" + value, {
            method: "get",
            contentType: "application/json;charset=utf-8",
            beforeSend: function(xhr) {
              xhr.setRequestHeader(
                "Authorization",
                sessionStorage.getItem("credentials")
              );
            },
            success: res => {
              if (res.code == 200 && res.data != null) {
                this.empolyeeList = res.data;
              } else {
                this.empolyeeList = [];
              }
            },
            error: res => {
              this.$Message.error(res.msg);
            }
          });
        }
      } else {
        this.empolyeeList = [];
        this.employeeName = "";
      }
    },

    //重置按钮
    reset() {
      // this.applyType = "";
      // this.dateRange = ["", ""];
      // this.manageCom = [];
      // this.employeeName = "";
      Object.assign(this.$data,this.$options.data())
      this.pageIndex = 1
      this.query();
      this.initialize()
    },

    // 页面查询
    indexChange(index) {
      this.pageIndex = index;
      this.pageQuery();
    },
    // 回显设置
    Echo(){
      this.jsonData = util.GetRequest(decodeURI(location.hash))
      console.log(this.jsonData,"ssss")
       console.log(this.jsonData.index,"pageIndex")
        if(this.jsonData.applyType || this.jsonData.employeeCode || this.jsonData.endTime || this.jsonData.managecom || this.jsonData.startTime || (this.pageIndex != "1" || this.jsonData.index)){
       let arr = []
          this.organization.forEach(one =>{
            if(one.value == this.jsonData.managecom){
              arr.push(one.value)
            }else if(one.children){
              one.children.forEach(tow =>{
                if(tow.value == this.jsonData.managecom){
                  arr.push(one.value,tow.value)
                }else if(tow.children){
                  tow.children.forEach(three =>{
                    if(three.value == this.jsonData.managecom){
                      arr.push(one.value,tow.value,three.value)
                    }else if(three.children){
                      three.children.forEach(four =>{
                        if(three.value == this.jsonData.managecom){
                          arr.push(one.value,tow.value,three.value,four.value)
                        }
                      })
                    }
                  })
                }
              })
            }
          })
          this.manageCom = arr
          this.applyType = this.jsonData.applyType
          this.pageIndex = Number(this.jsonData.index)
          let array = []
          array.push(this.jsonData.startTime,this.jsonData.endTime)
          this.dateRange = array
          this.organizationChange(this.manageCom)
          this.employeeName = this.jsonData.employeeCode
          this.$nextTick(()=>{
            this.query()
          })
        } else {
          console.log("没进来")
          // this.initialize();
          this.query()
        }
    }
  },
  watch: {},
  mounted() {
    // 初始化下拉框
    this.initialize();
    // 获取待审批数量
    this.getTotalApply();
    // this.$nextTick(() =>{
    // this.Echo()
    // this.query()
    // })
  },
  computed: {},
  created() {
  },
  beforeDestroy() {
    this.applyType = null;
    this.dateRange = null;
    this.approvalList = null;
    this.applyTypeList = null;
    this.pageIndex = null;
    this.manageCom = null;
    this.organization = null;
    this.employeeName = null;
    this.pageObj = null;
    this.empolyeeList = null;
  },
};
</script>

<style lang="less" scoped>
@import "./index";
@import "./../launchAudit/index.less";
</style>

